<template>
  <div class="device-type">
    <div class="card-title">设备类型</div>
    <div style="padding: 0 4vh">
      <div class="type1">
        <div class="type-name">
          {{ typeData[0] ? typeData[0].model : '' }}
        </div>
        <div class="type-data">
          <span style="width: 4vh; text-align: center">{{
            typeData[0] ? typeData[0].modelCount : ''
          }}</span
          ><span class="dashed"></span>
          <span style="width: 10vh; text-align: right"
            >{{
              typeData[0]
                ? typeData[0].modelCount == 0
                  ? 0
                  : ((typeData[0].modelCount * 100) / typeCount).toFixed(2)
                : ''
            }}%</span
          >
        </div>
      </div>
      <div class="type2">
        <div class="type-name">
          {{ typeData[1] ? typeData[1].model : '' }}
        </div>
        <div class="type-data">
          <span style="width: 4vh; text-align: center">{{
            typeData[1] ? typeData[1].modelCount : ''
          }}</span>
          <span class="dashed"></span
          ><span style="width: 10vh; text-align: right"
            >{{
              typeData[1]
                ? typeData[1].modelCount == 0
                  ? 0
                  : ((typeData[1].modelCount * 100) / typeCount).toFixed(2)
                : ''
            }}%</span
          >
        </div>
      </div>
    </div>
    <!-- -->
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
import { getDeviceType } from '@/api/home';

const props = defineProps({
  typeData: {
    type: Object,
    default: () => {},
  },
  typeCount: {
    type: Number,
    default: 0,
  },
});
</script>

<style lang="scss" scoped>
@use '../style.scss';
.device-type {
  width: 100%;
  height: 100%;
  color: #000;
}
.type1,
.type2 {
  margin-top: 2vh;
  height: 7.5vh;
  background-image: url('@/assets/images/type1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  .dashed {
    width: 6vh;
    border-bottom: 1px dashed #55b2ff;
  }
}
.type2 {
  background-image: url('@/assets/images/type2.png');
}
.type-name {
  margin-top: 1vh;
  margin-left: 8vh;
}
.type-data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 1vh;
  margin-top: 0.5vh;
  margin-left: 8vh;
  font-size: 2.5vh;
  span {
    font-weight: 700;
  }
}
</style>
